<template>
  <!-- 地区任务分发弹窗 -->
  <el-dialog
    title="指定责任人"
    width="420px"
    :visible.sync="showTask"
    :close-on-click-modal="false"
    @close="handleClose"
    :modal-append-to-body="false"
  >
    <el-form class="tipDialog">
      <el-form-item label="责任人" label-width="60px">
        <el-select
          v-model="value"
          multiple
          filterable
          allow-create
          placeholder="请输入关键词"
          @change="handleChange"
          :loading="loading"
          style="width: 300px"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.nickname + '(' + item.username + ')'"
            :value="item.id"
          >
            <template slot="append">.com</template>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="cancel" @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        class="save"
        :loading="taskLoading"
        @click="submit"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      options: [],
      value: [],
      list: [],
      loading: false,
      taskLoading: false,
      showTask: false,
      listId: [],

      id: '',
    }
  },
  props: {
    showTaskProp: {
      type: Boolean,
      default: false,
    },
    ids: {
      type: Array,
      default() {
        return []
      },
    },
    childData: {
      type: Object,
      required: true,
      default() {
        return {}
      },
    },
  },
  watch: {
    showTaskProp(val) {
      this.showTask = val
      this.value = []
      if (val) {
        this.getCasePersonList()
        const { id } = this.childData
        this.id = id
      }
    },
  },
  methods: {
    handleChange() {
      let arr = this.value
      if (arr.length) {
        let flag = false
        let str = ''
        arr.forEach((item) => {
          if (!this.listId.includes(item)) {
            flag = true
            str = item
          }
        })
        if (flag) {
          this.listId.push(str)
          this.options.unshift({ id: str, nickname: str })
        }
      }
    },
    /**
     * @name: 投诉责任人下拉列表接口（By SL）
     * @param {*}
     * @Author: 471826078@qq.com
     */
    getCasePersonList() {
      this.axios.get('api-u/users/areausers', {}).then((res) => {
        if (!res.data.hasError) {
          this.list = res.data.result
          let arr = []
          this.list.forEach((item) => {
            arr.push(item.id)
          })
          this.listId = arr
          this.options = res.data.result
        }
      })
    },
    handleClose(index) {
      if (this.showTask) {
        this.showTask = false
      }
      this.$emit('callback', { success: index == 1 ? true : false })
    },
    submit() {
      if (this.value.length) {
        let str = ''
        let that = this
        that.value.forEach((item, index) => {
          that.options.forEach((m) => {
            if (item == m.id) {
              str +=
                (index > 0 ? ',' : '') +
                (m.id == m.nickname ? '0' : item) +
                ':' +
                m.nickname
            }
          })
        })
        this.isLoading = true
        let params = {}
        if (that.ids.length) {
          params = { id: this.ids.join(','), complaintManagerId: str }
        } else {
          params = { id: this.id, complaintManagerId: str }
        }
        var url = 'api-r/rbp/modifyComplaintManager'
        if (this.isHsUser()) {
          url = 'api-r/rightbackpay/expand/modifyComplaintManager'
        }
        this.axios.post(url, params).then((res) => {
          if (!res.data.hasError) {
            this.$message({
              type: 'success',
              message: res.data.msg,
            })
            this.isLoading = false
            this.handleClose(1)
          } else {
            this.$message({
              type: 'warning',
              message: res.data.errorMsg,
            })
            this.isLoading = false
          }
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择责任人',
        })
      }
    },
  },
}
</script>
<style lang="less" scoped></style>
